<!--
 * @Author: ShiJunJie
 * @Date: 2020-12-04 17:30:22
 * @LastEditors  : ShiJunJie
 * @LastEditTime : 2022-04-14 18:46:51
 * @Descripttion: 
-->
<template>
  <a-layout-content id="ant-layout-content">
    <div id="content-view">
      <LayoutContentTabs />
      <LayoutContentBreadcrumb style="padding-right: 20px" />
      <div id="content-view-main">
        <slot name="main" />
      </div>
    </div>
  </a-layout-content>
</template>

<script setup>
import LayoutContentTabs from './LayoutContentTabs.vue';
import LayoutContentBreadcrumb from './LayoutContentBreadcrumb.vue';

onMounted(() => {
  setTimeout(() => {
    const top = document.getElementById('content-view-main').getBoundingClientRect().top;
    document.getElementById('content-view-main').style.height = `calc(100vh - ${top}px)`;
    // console.log(top);
  }, 1);
});
</script>

<style lang="scss" scoped>
@mixin h-100-o-v {
  height: 100vh;
  overflow: hidden;
}

.ant-layout-content {
  @include h-100-o-v();

  #content-view {
    margin: 20px 0 20px 20px;
    @include h-100-o-v();
    height: calc(100vh - 40px);

    #content-view-main {
      overflow: auto;
      padding-right: 20px;
    }
  }
}
</style>
